<template>
  <div>
    <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            background-color="#2C2C2C"
            text-color="#fff"
            active-text-color="#ffd04b">
      <el-menu-item>
        <img class="el-avatar--circle img-size-32" :src="suserInfo.avatar"> {{suserInfo.username}}
      </el-menu-item>

      <el-menu-item index="1">上传图片</el-menu-item>
      <el-menu-item index="2">管理图片</el-menu-item>
      <el-menu-item index="99">退出登录</el-menu-item>
    </el-menu>
  </div>
</template>

<script>
  export default {
    name: "Navigation",
    data() {
      return {
        activeIndex: '1'
      };
    },
    props: {
      suserInfo: {}
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key);
        if (key === "99") {
          console.log("session置空");
          window.sessionStorage.clear();
          this.$router.push("/login")
        }else if (key === '1') {
          this.$router.push('/upload')
        }else if (key === '2') {
          this.$router.push('/image')
        }
      },
      showUrlDialog(response, file, fileList) {
        console.log(response);
      }
    },
    created() {
      console.log(this.suserInfo);
    }
  }
</script>

<style scoped>


  .el-menu.el-menu--horizontal {
    border-bottom: none
  }
</style>